<template>
  <div class="allMembers">
    <div class="search">
      <div>
        <label>搜索：</label>
      </div>

      <el-input v-model="listParams.keyword" placeholder="ID/昵称"></el-input>

      <div>
        <el-button @click='searchKeyWord' type="primary">搜索</el-button>
      </div>
      <div>
        <el-button @click='addKeyWord' type="primary">添加会员</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="id" width="90">
        <template slot-scope="scope">
            <span @click='userDetails(scope.row)' class="link-type">{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="90">
        <template slot-scope="scope">
            <div class='imgBox'>
                <img :src="scope.row.avatar" alt="">
            </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="code" label="推荐码"></el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column label="注册时间">
        <template slot-scope="scope">
            <!-- {{ scope.row.time | parseTime('{y}-{m}-{d} {h}:{i}') }} -->
            <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份">
        <template slot-scope="scope">
            <span>{{getIdentity(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否认证">
        <template slot-scope="scope">
            <span>{{getauthStatus(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="commender" label="推荐人">
        <template slot-scope="scope">
            <span @click='userDetailsCommender(scope.row)' class="link-type">{{getInviteUserId(scope.row)}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="membership" label="直推会员人数"></el-table-column>
      <el-table-column prop="classTwoMembership" label="二级会员人数"></el-table-column>
      <el-table-column prop="orderNumber" label="订单数"></el-table-column> -->
      <el-table-column label="余额">
        <template slot-scope="scope">
            <span @click='openbillDetails(scope.row)' class="link-type">{{getShowDeciemal(scope.row.money)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份授权">
        <template slot-scope="scope">
          <el-button type="text" @click="message(scope.row)">授权</el-button>
        </template>
      </el-table-column>
      <el-table-column label="享受分成">
        <template slot-scope="scope">
          <el-button v-if='scope.row.special' type="text" @click="closeSharing(scope.row,false)">关闭</el-button>
          <el-button class='open' v-if='!scope.row.special' type="text" @click="closeSharing(scope.row,true)">开启</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>

    <!-- 余额明细 -->
    <billDetails ref='billDetails'></billDetails>

    <!-- 是否享受分成提示框 -->
    <el-dialog
      class="authorization"
      :visible.sync="enjoysplitVisible"
      width="30%"
      :before-close="handleenjoysplitClose"
    >
      <p v-if='sureEnjoy'>确认开启享受分成吗？</p>
      <p v-if='closeEnjoy'>确认关闭享受分成吗？</p>
      <div class="btnGroup">
        <el-button @click="enjoysplitVisible = false">取消</el-button>
        <el-button @click="enjoyForword" type="primary">确认</el-button>
      </div>
    </el-dialog>



    <!-- 身份授权 -->
    <el-dialog
      class="authorization"
      title="身份授权"
      :visible.sync="authorizationVisible"
      width="30%"
      :before-close="handleAuthorizationClose"
      >
      <el-checkbox-group class='authorizationGroup' v-model="checkList">
        <el-checkbox label="管理员">管理员</el-checkbox>
        <el-checkbox label="市场人员">市场人员</el-checkbox>
        <el-checkbox label="经销商">经销商</el-checkbox>
        <el-checkbox label="发行商">发行商</el-checkbox>
      </el-checkbox-group>

      <div class="btnGroup">
        <el-button @click="authorizationVisible = false">取消</el-button>
        <el-button @click="sureForword" type="primary">确认</el-button>
      </div>
    </el-dialog>

    <!-- 添加用户 -->
    <addUser ref='addUser'></addUser>
    
  </div>
</template>


<script>
import {ajax} from '@/api';
import { parseTime } from '@/utils';
import {getToken} from "@/utils/auth";
import billDetails from './components/billDetails';
import numberFormat from '@/api/numberFormat';
import addUser from './components/addUser'
export default {
  name: "allMembers",
  data() {
    return {
      input: "",
      total:0,
      sureEnjoy:false,
      closeEnjoy:false,
      checkList:[],
      enjoysplitVisible:false,
      authorizationVisible:false,
      tableData: [],
      listParams:{
        role:'',
        auth:0,
        keyword:'',
        inviteUserId:'',
        start:0,
        limit:10,
        token:getToken()
      },
      params:{   //标记用户是否为特殊用户
        targetUserId:'',
        special:'',
        token:getToken()
      },
      //用户快速授权
      userRoleParams:{
        targetUserId:'',
        userRoles:{"admin":false,"dealer":false,"issue":false,"market":false,"user":true},
        token:getToken()
      },
      user:{}
    };
  },
  methods:{
      //推荐人
      getInviteUserId(data){
          if(data.inviteUserId > 0){
            return this.user[data.inviteUserId].name;
          }else{
            return '--';
          }
      },
      addKeyWord(){
        this.$refs.addUser.openAddMarketDialogVisible();
      },
      getShowDeciemal(money){
        return numberFormat.showDecimal(money);
      },
      searchKeyWord(){
        if(this.listParams.keyword === ''){
          return this.$message.error('ID/昵称不能为空');
        }
        this.getList();
      },
      closeSharing(item,boolean){
        this.params.targetUserId = item.id;
        this.params.special = boolean;
        if(boolean){
          this.sureEnjoy = true;
          this.closeEnjoy = false;
        }else{
          this.sureEnjoy = false;
          this.closeEnjoy = true;
        }
        this.enjoysplitVisible = true;
      },
      enjoyForword(){
        //标记用户是否开启分成
        ajax('userMarkSpecial',this.params).then((res) => {
            if(res.data.status){
              this.enjoysplitVisible = false;
              this.params.targetUserId = '';
              this.params.special = '';
              this.sureEnjoy = false;
              this.closeEnjoy = false;
              this.$message.success('更改成功');
              this.getList();
              
            }else{
              this.$message.error(res.data.message);
            }
        });
      },
      //身份
      getIdentity(data){
        let str = '用户';
        if(data.role.admin){
          str = str + '、管理员';
        }

        if(data.role.dealer){
          str = str + '、经销商';
        }

        if(data.role.issue){
          str = str + '、发行商';
        }

        if(data.role.market){
          str = str + '、市场人员';
        }
        return str;
      },
      //是否认证
      getauthStatus(data){
        return data.authStatus.text;
      },
      //全部列表
      getList(){
        ajax('users',this.listParams).then((res) => {
          if(res.status === 200){
            console.log(res);
            this.total = res.data.total;
            this.tableData = res.data.data;
            this.user = res.data.users;
          }
        });
      },
      sureForword(){
        console.log(typeof this.userRoleParams.userRoles);
        if(this.checkList.indexOf('经销商') > -1 || this.checkList.indexOf('发行商') > -1){
            if(this.checkList.indexOf('管理员') > -1){
                return this.$message.error('发行商或经销商不能授权为管理员');
            }
        }
        if(this.checkList.indexOf('管理员') > -1){
          if(this.checkList.indexOf('经销商') > -1 || this.checkList.indexOf('发行商') > -1){
            return this.$message.error('管理员不能授权为发行商或经销商');
          }
        }
        for(let i = 0;i < this.checkList.length;i++){
          if(this.checkList[i] === '管理员'){
            console.log(this.userRoleParams.userRoles);
            if(typeof this.userRoleParams.userRoles === 'string'){
              JSON.parse(this.userRoleParams.userRoles).admin = true;
            }else{
              this.userRoleParams.userRoles.admin = true;
            }
          }
          if(this.checkList[i] === '市场人员'){
            if(typeof this.userRoleParams.userRoles === 'string'){
              JSON.parse(this.userRoleParams.userRoles).market = true;
            }else{
              this.userRoleParams.userRoles.market = true;
            } 
            
          }
          if(this.checkList[i] === '经销商'){
            if(typeof this.userRoleParams.userRoles === 'string'){
              JSON.parse(this.userRoleParams.userRoles).dealer = true;
            }else{
              this.userRoleParams.userRoles.dealer = true;
            } 
            
          }
          if(this.checkList[i] === '发行商'){
            if(typeof this.userRoleParams.userRoles === 'string'){
              JSON.parse(this.userRoleParams.userRoles).issue = true;
            }else{
              this.userRoleParams.userRoles.issue = true;
            }
            
          }
        }
        if(typeof this.userRoleParams.userRoles === 'object'){
          this.userRoleParams.userRoles = JSON.stringify(this.userRoleParams.userRoles);
        }
        
        //确认授权
        ajax('userRole',this.userRoleParams).then(res => {
          if(res.data.status){
            this.$message.success('授权成功');
            this.authorizationVisible = false;
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
        });
      },

      message(item){
        this.authorizationVisible = true;
        this.userRoleParams.targetUserId = item.id;
        let str = [];
        if(item.role.admin){
          str.push('管理员');
        }

        if(item.role.dealer){
          str.push('经销商');
        }

        if(item.role.issue){
          str.push('发行商');
        }

        if(item.role.market){
          str.push('市场人员');
        }
        this.checkList = str;
      },
      handleCurrentChange(val){
          this.listParams.start = (val - 1) * this.listParams.limit;
          this.getList();
      },
      openbillDetails(item){
          this.$refs.billDetails.openBill(item);
      },
      userDetails(data){
          this.$router.push({name:'userDetails',params:{id:data.id}});
      },
      userDetailsCommender(data){
          this.$router.push({name:'userDetails',params:{id:data.inviteUserId}});
      },
      handleAuthorizationClose(done){
        done();
      },
      handleenjoysplitClose(done){
        done();
        this.params.targetUserId = '';
        this.params.special = '';
        this.sureEnjoy = false;
        this.closeEnjoy = false;
      }
  },
  mounted(){
    this.getList();
  },
  components:{
    billDetails,
    addUser
  }
};
</script>


<style lang="less" scoped>
.allMembers {
  padding: 1rem;
  .search {
    display: flex;
    margin: .5rem 0 1rem 0;
    div:first-child {
      width: 3.5rem;
      line-height: 2.5rem;
      label {
        font-weight: 400;
      }
    }
    div:nth-child(2) {
      width: 11rem;
      margin-right: 1rem;
    }
    div:nth-child(3){
      margin-right: 1rem;
    }
  }
  .imgBox{
      width: 50px;
      height: 50px;
      margin: 0 auto;
      img{
          width: 100%;
          height: 100%;
          border-radius: 50px;
      }
  }
  .pagination{
    text-align: right;
    margin: 1rem 0;
  }  
  .authorizationGroup{
    display: flex;
    flex-wrap: wrap;
    .el-checkbox{
      width: 100%;
      margin: 0;
    }
    .el-checkbox:nth-child(2){
      margin: 1rem 0;
    }
    .el-checkbox:nth-child(3){
      margin-bottom: 1rem;
    }
  }

  .btnGroup{
    margin-top: 3rem;
    text-align: right;
  }
  .open{
    color: green;
  }
}
</style>
